<template>
    <div>
        <el-form ref="form" :model="form" label-width="140px" :rules="rules" :label-position="labelPosition"
                 style="margin-left: 5%;margin-right: 5%">
            <el-form-item label="债权类型 ：" prop="creditType">
                <el-select v-model="form.creditType" placeholder="请选择">
                    <el-option
                            v-for="nature in creditType"
                            :key="nature.value"
                            :label="nature.value"
                            :value="nature.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="主债务人 ：" prop="mainObligor">
                <el-input v-model="form.mainObligor"></el-input>
            </el-form-item>
            <el-form-item label="连带债务人 ：">
                <el-input v-model="form.relatedObligor"></el-input>
            </el-form-item>
            <el-form-item label="债权性质 ：">
                <el-select v-model="form.creditNature" placeholder="请选择">
                    <el-option
                            v-for="type in creditNature"
                            :key="type.value"
                            :label="type.value"
                            :value="type.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <div v-if="form.creditNature == '优先债权'">
                <el-form-item label="是否放弃优先受偿权 ：">
                    <el-radio v-model="form.giveFirst" label="1" style="margin-left: 20%">不放弃</el-radio>
                    <el-radio v-model="form.giveFirst" label="0" style="margin-left: 10%">放弃</el-radio>
                </el-form-item>
                <el-form-item label="担保物情况 ：">
                    <el-input type="textarea" v-model="form.guaranteeCond"
                              :autosize="{ minRows: 4, maxRows: 10}"></el-input>
                </el-form-item>
                <el-form-item label="担保形式 ：" prop="guaranteeFormText">
                    <el-select v-model="form.guaranteeForm" placeholder="请选择">
                        <el-option
                                v-for="guaranteeForm in guaranteeFormList"
                                :key="guaranteeForm.value"
                                :label="guaranteeForm.value"
                                :value="guaranteeForm.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="本金 ：" prop="declarePrincipal">
                <el-input v-model.number="form.declarePrincipal" @change="getTotal"></el-input>
            </el-form-item>
            <el-form-item label="利息 ：" prop="declareInterest">
                <el-input v-model.number="form.declareInterest" @change="getTotal"></el-input>
            </el-form-item>
            <el-form-item label="违约金等其他金额 ：" prop="declareOther">
                <el-input v-model.number="form.declareOther" @change="getTotal"></el-input>
            </el-form-item>
            <el-form-item label="合计 ：">
                <el-input v-model.number="form.declareTotal" disabled></el-input>
            </el-form-item>
            <el-form-item label="债权形成过程 ：">
                <el-input type="textarea" v-model="form.declareProcess"
                          :autosize="{ minRows: 4, maxRows: 10}"></el-input>
            </el-form-item>
            <el-form-item label="需要特别说明的情况 ：">
                <el-input type="textarea" v-model="form.declareNote" :autosize="{ minRows: 4, maxRows: 10}"></el-input>
            </el-form-item>
        </el-form>

        <div style="margin-top: 5%; width: 100%; text-align: center" v-if="showBack">
            <el-button type="primary" @click="previousPage" style="margin-right: 5%; margin-left: 5%;width: 39%">上一页
            </el-button>
            <el-button type="primary" @click="nextPage('form')" style="margin-right: 5%; margin-left: 5%; width:39%">下一页
            </el-button>
        </div>
        <div style="width: 100%; text-align: center" v-else="showBack">
            <el-button type="primary" @click="nextPage('form')" style="width: 60%">下一页</el-button>
        </div>
    </div>
</template>

<script>
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                creditType: [
                    {
                        value: '金融借贷',
                    }, {
                        value: '民间借贷',
                    }, {
                        value: '货款',
                    }, {
                        value: '其他',
                    },
                ],
                creditNature: [
                    {
                        value: '职工债权',
                    }, {
                        value: '普通债权',
                    }, {
                        value: '税收债权',
                    }, {
                        value: '优先债权',
                    },
                ],
                guaranteeFormList: [
                    {
                        value: '抵押'
                    }, {
                        value: '质押'
                    }, {
                        value: '其他'
                    }
                ],
                guaranteeFormText: '',
                labelPosition: 'top',
                rules: {
                    creditType: [{required: true, message: '请选择债权类型', trigger: 'blur'}],
                    mainObligor: [
                        {required: true, message: '债务人不能为空'},
                        {min: 2, max: 80, message: '请输入正确格式的姓名', trigger: 'blur'}
                    ],
                    declarePrincipal: [
                        {required: true, message: '本金不能为空且为纯数字'},
                        {type: 'number', message: '本金必须为数字值'}
                    ],
                    declareInterest: [
                        {required: true, message: '利息不能为空且为纯数字'},
                        {type: 'number', message: '利息必须为数字值'}
                    ],
                    declareOther: [
                        {required: true, message: '其他金额不能为空且为纯数字'},
                        {type: 'number', message: '其他金额必须为数字值'}
                    ]
                }
            }
        },
        props: [
            'form',
            'showBack'
        ],
        mounted() {
            /*this.form.creditType = this.matchNatureText(this.form.creditType);
            this.form.creditNature = this.matchTypeText(this.form.creditNature);*/
            this.form.guaranteeForm = this.matchGuaranteeFormText(this.form.guaranteeForm);
        },
        methods: {
            getTotal: function (value) {
                this.form.declareTotal = parseFloat(parseFloat(this.form.declarePrincipal) + parseFloat(this.form.declareInterest) + parseFloat(this.form.declareOther))
            },
            nextPage: function (form) {
                if (!conf.inDevelop) {
                    const _self = this;
                    if (this.creditNature === '优先债权' && this.guaranteeForm === '') {
                        alert('请选择担保形式');
                        return;
                    }
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            /*_self.form.creditType = _self.matchNature(_self.form.creditType);
                            _self.form.creditNature = _self.matchType(_self.form.creditNature);
                            _self.form.guaranteeForm = _self.matchGuaranteeForm(_self.form.guaranteeForm);*/
                            _self.$emit('nextPage', _self.form)
                        } else {
                            alert('您输入的信息有误!!');
                            return false
                        }
                    })
                } else {
                    this.$emit('nextPage', this.form)
                }
            },
            previousPage: function () {
                this.$emit('previousPage', this.form)
            },
            matchNatureText: function (type) {
                let typeText = '';
                switch (type) {
                    case 1:
                        typeText = '金融借贷';
                        break;
                    case 2:
                        typeText = '民间借贷';
                        break;
                    case 3:
                        typeText = '货款';
                        break;
                    case 4:
                        typeText = '其他';
                        break;
                    default:
                        break
                }
                return typeText
            },
            matchNature: function (text) {
                let type = 0;
                switch (text) {
                    case '金融借贷':
                        type = 1;
                        break;
                    case '民间借贷':
                        type = 2;
                        break;
                    case '货款':
                        type = 3;
                        break;
                    case '其他':
                        type = 4;
                        break;
                    default:
                        break
                }
                return type
            },
            matchGuaranteeFormText: function (type) {
                let typeText = '';
                switch (type) {
                    case '1':
                        typeText = '其他';
                        break;
                    case '2':
                        typeText = '抵押';
                        break;
                    case '3':
                        typeText = '质押';
                        break;
                    default:
                        break
                }
                return typeText
            },
            matchGuaranteeForm: function (text) {
                let type = '';
                switch (text) {
                    case '其他':
                        type = '1';
                        break;
                    case '抵押':
                        type = '2';
                        break;
                    case '质押':
                        type = '3';
                        break;
                    default:
                        break
                }
                return type
            },
            matchTypeText: function (type) {
                let typeText = '';
                switch (type) {
                    case 0:
                        typeText = '';
                        break;
                    case 1:
                        typeText = '职工债权';
                        break;
                    case 2:
                        typeText = '普通债权';
                        break;
                    case 3:
                        typeText = '税收债权';
                        break;
                    case 4:
                        typeText = '优先债权';
                        break;
                    default:
                        break;
                }
                return typeText;
            },
            matchType: function (typeText) {
                let type = 0;
                switch (typeText) {
                    case '职工债权':
                        type = 1;
                        break;
                    case '普通债权':
                        type = 2;
                        break;
                    case '税收债权':
                        type = 3;
                        break;
                    case '优先债权':
                        type = 4;
                        break;
                    case '':
                        type = 0;
                        break;
                    default:
                        break;
                }
                return type;
            },
        }
    }
</script>
<style>
    .el-form-item__label {
        line-height: 0
    }
</style>
